import React from 'react';
import { Card, Descriptions } from 'antd';
import { getDicByKey } from '@/support/common';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import moment from 'moment';
import MaskText from '@/components/MaskText';

@connect((state: any) => ({
  vehicleInfo: state.vehicleInfo,
  loading: state.loading.effects['vehicleInfo/getDataWithRes'],
}))
export default class UserTab extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        userName: '',
        sexuality: '',
        idType: '',
        idNo: '',
        mobilePhone: '',
        email: '',
        createDate: '',
      },
    };
  }

  static contextTypes = {
    dicData: PropTypes.any,
  };
  componentDidMount() {
    this.getDetail();
  }
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  getDetail() {
    const { vehicleInfo } = this.props;
    const { dispatch } = this.props;

    vehicleInfo.tbox && vehicleInfo.pdsn
      ? dispatch({
          type: 'vehicleInfoQuery/getDataWithRes',
          payload: {
            url: `/vehicle/ownerprofile/`,
            tbox: vehicleInfo.tbox,
            pdsn: vehicleInfo.pdsn,
          },
          callback: response => {
            if (response && response.statusCode == '0' && response.data) {
              this.setState({
                data: Object.assign(this.state.data, response.data),
              });
            }
          },
        })
      : '';
  }
  render() {
    const { context } = this;
    const { data } = this.state;
    const { loading } = this.props;

    return (
      <>
        <Card bordered={false} loading={loading}>
          <Descriptions bordered size="small" style={{ overflow: 'hidden' }}>
            <Descriptions.Item label="姓名">
              <MaskText text={data.userName} type="name" />
            </Descriptions.Item>
            <Descriptions.Item label="性别">
              {data.sexuality ? getDicByKey(context.dicData, 'sex', data.sexuality.toString()) : ''}
            </Descriptions.Item>
            <Descriptions.Item label="证件类型">
              {/* {getDicByKey(context.dicData, 'idType', data.idType.toString())} */}
              {data.idType === 1 ? '身份证' : data.idType === 2 ? '驾驶证' : '其它'}
            </Descriptions.Item>
            <Descriptions.Item label="证件号">
              <MaskText text={data.idNo} type="identity" />
            </Descriptions.Item>
            <Descriptions.Item label="手机号">
              <MaskText text={data.mobilePhone} type="phone" />
            </Descriptions.Item>
            <Descriptions.Item label="邮箱">
              <MaskText text={data.email} type="email" />
            </Descriptions.Item>
            <Descriptions.Item label="注册时间">
              {data.createDate ? moment(data.createDate).format('YYYY-MM-DD HH:mm:ss') : ''}
            </Descriptions.Item>
            <Descriptions.Item label=""></Descriptions.Item>
            <Descriptions.Item label=""></Descriptions.Item>
          </Descriptions>
        </Card>
      </>
    );
  }
}
